<template>
    <div class="screen">
        <div class="making">
            <div class="making-header">
                <div class="img">
                    <img :src="makingImg" alt width="30" height="30" />
                </div>
                <div class="title">制作中... Coming...</div>
            </div>
            <ul class="making-content">
                <li v-for="(item, index) in makingData" :key="index">{{item.mealId}}</li>
            </ul>
        </div>
        <div class="completed">
            <div class="completed-header">
                <div class="img">
                    <img :src="completedImg" alt width="30" height="30" />
                </div>
                <div class="title">请取餐... Serving...</div>
            </div>
            <ul class="completed-content">
                <li
                    v-for="(item, index) in completedData"
                    :key="index"
                ><span class="mealId-color">{{item.mealId}}</span> - {{item.number}} 号取餐口</li>
            </ul>
        </div>
        <!-- <el-button @click="test">test</el-button> -->
        <!-- <el-button @click="call">call</el-button>  -->
    </div>
</template>

<script>
import completedImg from "@/assets/images/completed.svg";
import makingImg from "@/assets/images/making.svg";
window.getData = function(res) {
    let myEvent = new CustomEvent("getData", {
        detail: { res: res }
    });
    window.dispatchEvent(myEvent);
};

export default {
    data() {
        return {
            completedImg,
            makingImg,
            makingData: localStorage.getItem('makingData') ? JSON.parse(localStorage.getItem('makingData')) : [],
            completedData: localStorage.getItem('completedData') ? JSON.parse(localStorage.getItem('completedData')) : [],
            callTimer: null
        };
    },
    mounted() {
        window.addEventListener("getData", event => {
            let res = JSON.parse(event.detail.res);
            // this.$message.success(event.detail.res)
            if(!res.topic.includes('claypot_instruction_')) return
            if(!res.data.data){
                res.data.data = {
                    waiting: [],
                    calling: [],
                }
            } 
            this.getData(res.data.data);
        });
        // setTimeout(() => {
        //     let str = '请 A001，，，到1号取餐口取餐。，，，，，请 B003，，，到2号取餐口取餐。'
        //     window.androidObj.callSpeeck(str);
        // }, 10000)
    },
    methods: {
        getData(res) {
            this.makingData = res.waiting || [];

            this.completedData = res.calling || [];

            localStorage.setItem('makingData', JSON.stringify(this.makingData))
            localStorage.setItem('completedData', JSON.stringify(this.completedData))

            let str1 = "";
            let str2 = "";
            this.completedData.forEach(item => {
                if (item.number === 1) {
                    str1 += (item.mealId + "，");
                } else if (item.number === 2) {
                    str2 += (item.mealId + "，");
                }
            });
            let str = "";
            if (str1) str += ("请," + str1 + "到1号取餐口取餐。");
            if (str2) str += ("请," + str2 + "到2号取餐口取餐。");
            // str = '你好'
            // this.$message.success(str);
            if (window.androidObj) {
                clearInterval(this.callTimer)
                this.callTimer = setInterval(() => {
                    window.androidObj.callSpeeck(str);
                }, 15000)
            }
        },
        call() {
            this.getData({
                waiting: [
                    {
                        number: 1,
                        mealId: "A008",
                        qty: 3
                    },{
                        number: 1,
                        mealId: "A008",
                        qty: 3
                    },{
                        number: 1,
                        mealId: "A008",
                        qty: 3
                    },{
                        number: 1,
                        mealId: "A008",
                        qty: 3
                    },{
                        number: 1,
                        mealId: "A008",
                        qty: 3
                    },{
                        number: 1,
                        mealId: "A008",
                        qty: 3
                    },{
                        number: 1,
                        mealId: "A008",
                        qty: 3
                    },{
                        number: 1,
                        mealId: "A008",
                        qty: 3
                    },{
                        number: 1,
                        mealId: "A008",
                        qty: 3
                    },{
                        number: 1,
                        mealId: "A008",
                        qty: 3
                    },{
                        number: 1,
                        mealId: "A008",
                        qty: 3
                    },{
                        number: 1,
                        mealId: "A008",
                        qty: 3
                    },{
                        number: 1,
                        mealId: "A008",
                        qty: 3
                    },{
                        number: 1,
                        mealId: "A008",
                        qty: 3
                    },{
                        number: 1,
                        mealId: "A008",
                        qty: 3
                    },{
                        number: 1,
                        mealId: "A008",
                        qty: 3
                    },{
                        number: 1,
                        mealId: "A008",
                        qty: 3
                    },{
                        number: 1,
                        mealId: "A008",
                        qty: 3
                    },
                ],
                calling: [
                    {
                        number: 1,
                        mealId: "B002",
                        detailId: "1205674969532854292",
                        qty: 3
                    },
                    {
                        number: 2,
                        mealId: "A006",
                        detailId: "1205674969532854292",
                        qty: 3
                    }
                ],
                deviceId: 1204291689871810562
            });
        }
    }
};
</script>

<style lang="less" scoped>
.screen {
    color: #fafafa;
    height: 100%;
    display: flex;
    box-sizing: border-box;
    padding: 40px;
    & > div {
        padding: 0 40px;
    }
    .making {
        flex: 1;
        padding-left: 0;
        border-right: 2px dashed #ccc;
        .making-header {
            display: flex;
            align-items: center;
            background: #999;
            font-size: 40px;
            .img {
                padding: 20px;
                background: rgba(0, 0, 0, 0.1);
                margin-right: 40px;
            }
        }
        .making-content {
            font-size: 40px;
            color: #ccc;
            display: flex;
            justify-content: space-around;
            flex-wrap: wrap;
            & > li {
                width: 200px;
                text-align: center;
                margin-top: 50px;
            }
            & > li:last-child {
                margin-right: auto;
            }
        }
    }
    .completed {
        width: 37%;
        padding-right: 0;
        .completed-header {
            display: flex;
            align-items: center;
            background: #e3007e;
            font-size: 40px;
            .img {
                padding: 20px;
                background: rgba(0, 0, 0, 0.1);
                margin-right: 40px;
            }
        }
        .completed-content {
            display: flex;
            flex-direction: column;
            align-items: center;
            font-size: 52px;
            & > li {
                margin-top: 50px;
            }
            .mealId-color{
                color: yellow;
                // animation: changeColor 2s ease infinite;
            }
        }
    }
    @keyframes changeColor {
        0% {
            opacity: 1;
        }
        50% {
            opacity: 0.5;
        }
        100%{
            opacity: 1;
        }
    }
}
</style>